<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <style>
        *{margin:0;padding:0;list-style: none;}
        body{overflow: hidden}
        .box{
            width:570px;height:570px;background: url(http://3.tthunbohui.cn/zhuanti/11270/1.png) no-repeat;
            background-size: 100%;animation: anima 2s linear infinite;
            position: absolute;left:-0px;right:0;top:0;bottom:0;margin: auto;
        }
        .box:hover{
            animation-play-state:paused;
        }
        @keyframes anima{
            0%{transform: rotate(0deg)}
            100%{transform: rotate(-360deg)}
        }
        @keyframes p{
            0%{}
            10%{transform: rotate(0deg);margin-left: 200px;width:800px;height:200px;}
            30%{transform: rotate(40deg);margin-top: 100px;border-radius: 50%;margin-right: 300px;}
            50%{width:400px;height:300px;border-radius: 20%;margin-bottom: 200px;}
            60%{border-radius: 100px;margin-bottom: 200px;transform: rotate3D(0,1,1,260deg);}
            80%{width:500px;height:300px;transform: rotate3D(1,0,1,320deg);}
            100%{transform: rotate(-360deg)}
        }

        .ul{
            width:500px;height:500px;background: url(http://3.tthunbohui.cn/zhuanti/11270/content.png) no-repeat;transition: all 4s ease;
            background-size: 100%;position: absolute;left:0;right:0;top:0;bottom:0;margin: auto;
        }
        .img{
            display: block;position: absolute;left:-47px;right:0;top:-40px;bottom:0;margin: auto;
            cursor: pointer;transform: rotate(1deg);
        }
        /*pp*/
        .close{
            width:300px;height:200px;position: absolute;left:0;right:0;top:0;bottom:0;margin: auto;
            background: rgba(0,0,0,0.7);border-radius: 20px;transition: all 0.5s ease;transform:scale(0);
        }
        .close p{
            width:90%;height:50%;color:white;display: block;line-height: 30px;padding-left: 10px;font-size: 22px;
            font-family: "楷体";padding-top: 50px;position: absolute;left:0;top:0;opacity: 0;
        }

        .close span{
            width:30px;height:30px;position: absolute;right:5px;top:5px;background: rgba(255,186,231,0.6);text-align: center;
            line-height: 30px;font-size: 22px;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;border-radius: 50%;
            cursor: pointer;display: block;
        }
    </style>
</head>
<body>

<div style="width:100%;height:800px;">
    <div class="box"></div>
    <ul class="ul"></ul>
    <img src="http://3.tthunbohui.cn/zhuanti/11270/btn.png" alt="" class="img">

    <div class="close">
        <p class="p1">恭喜你中了二等奖！<br>二等奖：林志玲一枚。恭喜恭喜</p>

        <p class="p2">恭喜你中了三等奖！<br>三等奖：马来西亚五日游。恭喜恭喜</p>

        <p class="p3">手气不行啊，再给你一次机会！<br>求也卵不成</p>

        <p class="p4">完蛋！<br>抽个奖也抽不中</p>

        <p class="p5">卧槽！一等奖<br>欧洲名模一个、美国别墅一套、非洲苦力一名</p>
        <span>X</span>
    </div>
</div>

</body>
</html>
<script>
    window.onload=function(){
        var box=document.getElementsByClassName("box")[0];
        var ul=document.getElementsByClassName("ul")[0];
        var img=document.getElementsByClassName("img")[0];
        var close=document.getElementsByClassName("close")[0];
        var p1=document.getElementsByClassName("p1")[0];
        var p2=document.getElementsByClassName("p2")[0];
        var p3=document.getElementsByClassName("p3")[0];
        var p4=document.getElementsByClassName("p4")[0];
        var p5=document.getElementsByClassName("p5")[0];
        var btn=document.querySelector(".close span");
        var p=close.getElementsByTagName("p");


        btn.onclick=function(){
            close.style.cssText="transform:scale(0)"
        };
//        alert(num)
        img.onclick=function(){
//        72 144 216  288 360
            var num=Math.floor(Math.random()*3600);
            ul.style.cssText="transform:rotate("+num+"deg)";
//            alert("1")
            num%=360;
            setTimeout(function(){
                if (num<=72) {
//                alert("2")
                    close.style.cssText="transform:scale(1)";
                    for (var i=0;i< p.length;i++){
                        p[i].style.opacity="0"
                    }
                    p1.style.cssText="opacity:1;";
                    close.style.cssText="animation: p 5s ease 0s;transform:scale(1)"

                }else if (num<=72*2) {
//                alert("3")
                    close.style.cssText="transform:scale(1)";
                    for (var i=0;i< p.length;i++){
                        p[i].style.opacity="0"
                    }
                    p2.style.cssText="opacity:1;";
                    close.style.cssText="animation: p 5s ease 0s;transform:scale(1)"
                }else if (num<=72*3) {
//                alert("再来")
                    close.style.cssText="transform:scale(1)";
                    for (var i=0;i< p.length;i++){
                        p[i].style.opacity="0"
                    }
                    p3.style.cssText="opacity:1;";
                    close.style.cssText="animation: p 5s ease 0s;transform:scale(1)"
                }else if (num<=72*4) {
//                alert("参与")
                    close.style.cssText="transform:scale(1)";
                    for (var i=0;i< p.length;i++){
                        p[i].style.opacity="0"
                    }
                    p4.style.cssText="opacity:1;";
                    close.style.cssText="animation: p 5s ease 0s;transform:scale(1)"
                }else if (num<=72*5) {
//                alert("1")
                    close.style.cssText="transform:scale(1)";
                    for (var i=0;i< p.length;i++){
                        p[i].style.opacity="0"
                    }
                    p5.style.cssText="opacity:1;";
                    close.style.cssText="animation: p 5s ease 0s;transform:scale(1)"
                }
            },4000);
        };

    }
</script>